﻿<Page x:Class="Microsoft.Research.DynamicDataDisplay.Samples.Demos.v04.EditableShapesSample"
	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	  xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
	  Title="EditableShapesPage">
	<Grid>
		<d3:ChartPlotter Name="plotter" Visible="0,0,1,1">
			<d3:PolylineEditor>
				<d3:ViewportPolygon Points="0.3,0.6 0.3,0.7 0.35,0.6 0.2,0.8 0.4,0.65, 0.4,0.7">
					<d3:LiveToolTipService.ToolTip>
						<d3:LiveToolTip Background="Coral">
							Polyline with points editing
						</d3:LiveToolTip>
					</d3:LiveToolTipService.ToolTip>
				</d3:ViewportPolygon>
			</d3:PolylineEditor>

			<d3:PolylineEditor>
				<d3:ViewportPolyline Stroke="Green" Points="0.1,0.6 0.1,0.7 0.15,0.6 0.05,0.8 0.2,0.65, 0.2,0.7"/>
			</d3:PolylineEditor>

			<d3:PolylineEditor>
				<d3:ViewportPolyBezierCurve Fill="Olive" StrokeThickness="3" BuildBezierPoints="False"
										Points="0.8,0.7 0.85,0.7 0.85,0.6 0.8,0.6">
					<d3:LiveToolTipService.ToolTip>
						<d3:LiveToolTip Background="#FFA6BC7C">
							PolyBezier line with points editing
						</d3:LiveToolTip>
					</d3:LiveToolTipService.ToolTip>
				</d3:ViewportPolyBezierCurve>
			</d3:PolylineEditor>

			<d3:ViewportPolyBezierCurve Name="bezierPoints" Stroke="Violet" StrokeThickness="4"
										Points="0.8,0.1 0.83,0.15 0.9,0.2 0.95,0.25 0.8,0.3">
				<d3:LiveToolTipService.ToolTip>
					<d3:LiveToolTip Background="Violet">
						PolyBezier line with control points editing
					</d3:LiveToolTip>
				</d3:LiveToolTipService.ToolTip>
			</d3:ViewportPolyBezierCurve>

			<d3:PolylineEditor>
				<d3:ViewportPolyline Points="{Binding BezierPoints, ElementName=bezierPoints, Mode=TwoWay}" Stroke="#A06BA8FF"/>
			</d3:PolylineEditor>

			<d3:ViewportHostPanel>
				<Ellipse d3:ViewportPanel.X="{Binding ElementName=ellipsePoint, Path=Position.X}" 
						 d3:ViewportPanel.Y="{Binding ElementName=ellipsePoint, Path=Position.Y}" 
						 Width="100" Height="100"
						 Fill="Orange" Stroke="OrangeRed">
					<d3:LiveToolTipService.ToolTip>
						<d3:LiveToolTip Background="Orange">
							Ellipse with editing of its center position
						</d3:LiveToolTip>
					</d3:LiveToolTipService.ToolTip>
				</Ellipse>

				<TextBlock d3:ViewportPanel.X="0.5" d3:ViewportPanel.Y="0.5"
						   d3:ViewportPanel.ViewportVerticalAlignment="Top"
						   d3:ViewportPanel.ViewportHorizontalAlignment="Left"
						   >Sample text in position (0.5, 0.5)</TextBlock>
			</d3:ViewportHostPanel>

			<d3:DraggablePoint Name="ellipsePoint" Position="0.6, 0.4"/>
		</d3:ChartPlotter>
	</Grid>
</Page>
